<template>
  <div class="div_box">
    <div class="container">
      <div style="
          position: relative;
          width: 800px;
          display: flex;
          justify-content: center;
        ">
        <div id="video-container" :style="test ? '' : '  background-color: transparent;'"></div>
        <div class="error">{{ test }}</div>
        <div class="huifang-box">
          <div class="huifang">
            <div class="huifang-txt" @click="live" :style="flag
                ? 'background-color: #71a3bc;color: #fff;'
                : 'color: rgba(255,255,255,.6)'
              ">
              直播
            </div>
            <div class="huifang-txt" @click="playback" :style="!flag
                ? 'background-color: #71a3bc;color: #fff;'
                : 'color: rgba(255,255,255,.6)'
              ">
              回放
            </div>
          </div>
        </div>
        <div class="encoding-box">
          {{deviceInfo.imei}}
        </div>
      </div>
    </div>
   
  </div>
</template>

<script>
import EZUIKit from "ezuikit-js"; // ezuikit-js7.6.4

export default {
  name: "HelloWorld",
  props: {
    msg: String,
    deviceInfo: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      player: null,
      player2: null,
      flag: true,
      test: "",
    };
  },
  mounted: () => { },
  methods: {
    // 获取token
    gettoken() {
      if (this.player) {
        this.destroy();
      }
      fetch(
        `https://open.ys7.com/api/lapp/token/get?appKey=d6a1a4287b9a4d78adebaa7bbc8c7125&appSecret=6b9102e6b4ef80beb7067be13d08bd2c`,
        {
          method: "POST",
        }
      )
        .then((response) => response.json())
        .then((res) => {
          // console.log(res);
          this.accessToken = res.data.accessToken;
          this.getaddress();
        });
    },
    // 获取播放地址接口
    getaddress() {
      this.flag = true;
      this.test = "";
      fetch(
        `https://open.ys7.com/api/lapp/v2/live/address/get?accessToken=${this.accessToken}&deviceSerial=${this.deviceInfo.sn}&supportH265=1&quality=2`,
        {
          method: "POST",
        }
      )
        .then((response) => response.json())
        .then((res) => {
          if (res.code != 200) {
            this.test = res.msg;
            return;
          }
          this.url = res.data.url;
          let player = new EZUIKit.EZUIKitPlayer({
            id: "video-container", // 视频容器ID
            accessToken: this.accessToken,
            url: res.data.url,
            // url: 'ezopen://open.ys7.com/33010468992637119318:33011030991327907487/1.rec',
            // template: "pcLive", // simple: 极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放;security: 安防版; voice: 语音版;
            template: "9e09e1d4de4043879e93082b38adfca6",
            plugin: ["talk"], // 加载插件，talk-对讲
            useHardDev:true,
            width: 800,
            height: 500,
          });
          this.player = player;
        });
    },
    live() {
      this.player && this.destroy();
      this.getaddress();
    },
    playback() {
      this.flag = false;
      this.test = "";
      this.player && this.destroy();
      fetch(
        `https://open.ys7.com/api/lapp/v2/live/address/get?accessToken=${this.accessToken}&deviceSerial=${this.deviceInfo.sn}&type=2&supportH265=1&quality=2`,
        {
          method: "POST",
        }
      )
        .then((response) => response.json())
        .then((res) => {
          if (res.code != 200) {
            this.test = res.msg;
            return;
          }
          this.url = res.data.url;
          let player = new EZUIKit.EZUIKitPlayer({
            id: "video-container", // 视频容器ID
            accessToken: this.accessToken,
            url: res.data.url,
            template: "30b41277ab574eb0ae43706f5ea254bc",
            // url: 'ezopen://open.ys7.com/33010468992637119318:33011030991327907487/1.rec',
            // template: "pcRec", // simple: 极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放;security: 安防版; voice: 语音版;
            plugin: ["talk"], // 加载插件，talk-对讲
            width: 800,
            height: 500,
          });
          this.player = player;
        });
    },
    destroy() {
      var destroyPromise = this.player.destroy();
      destroyPromise.then((data) => {
        console.log("promise 获取 数据", data);
      });
      this.player = null;
    },
  },
};
</script>

<style lang="less" scoped>
.div_box {
  overflow: auto;
  width: 100%;
  height: 500px;
  padding-bottom: 20px;
  // height: 56vh;
  display: flex;
  justify-content: center;

  .container {
    width: 63%;
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    #video-container {
      width: 800px;
      height: 500px;
      background-color: @primarywarn;
    }

    .error {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: red;
    }
    .encoding-box{
      width: 300px;
      position: absolute;
      height: 48px;
      display: flex;
      align-items: center;
      left: 6px;
      background-color: transparent;
      z-index: 999;
      color: #fff;
    }

    .huifang-box {
      position: absolute;
      height: 48px;
      display: flex;
      align-items: center;
      right: 12px;
    }

    .huifang {
      display: flex;
      background-color: #3d3d3d;
      border-radius: 20px;
      font-size: 12px;

      >div {
        width: 54px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        color: #000000;
        cursor: pointer;

        &:hover {
          color: rgba(255, 255, 255, 1);
        }
      }

      .huifang-txt {
        &:hover {
          color: rgba(255, 255, 255, 1) !important;
        }
      }
    }
  }
}
::v-deep .header-controls .theme-icon-item{
  display: none;
}
</style>
